import React, { useEffect, useRef } from 'react';
import { BrowserRouter as Router, Routes, Route, useNavigate, useLocation } from 'react-router-dom';
import Home from './pages/Home';
import GameSelect from './pages/GameSelect';
import StyleSelect from './pages/StyleSelect';
import CaseSelect from './pages/CaseSelect';
import GamePage from './pages/GamePage';
import Tutorial from './pages/Tutorial';
import Settings from './pages/Settings';
import Layout from './Layout';

function AppContent() {
  const navigate = useNavigate();
  const location = useLocation();
  const isInitialLoad = useRef(true);

  useEffect(() => {
    if (isInitialLoad.current && location.pathname !== '/') {
      navigate('/', { replace: true });
    }
    isInitialLoad.current = false;
  }, [location.pathname, navigate]);

  return (
    <Layout>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/game-select" element={<GameSelect />} />
        <Route path="/style-select" element={<StyleSelect />} />
        <Route path="/case-select" element={<CaseSelect />} />
        <Route path="/game" element={<GamePage />} />
        <Route path="/tutorial" element={<Tutorial />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Layout>
  );
}

function App() {
  return (
    <Router>
      <AppContent />
    </Router>
  );
}

export default App;
